<template>
    <div>
        <!-- 详情说明  -->
        <div class="info">
            <p>采购商品后，需经过确认收货后，在此确认入库才会增加相应的库存</p>
        </div>

        <el-row>
            <el-col :span="20">
                <div>
                    <el-date-picker
                            clearable
                            class="mt"
                            v-model="form.purchase"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="采购时间开始"
                            end-placeholder="采购时间结束">
                    </el-date-picker>
                    <el-input placeholder="商品关键字" style="width: 30%" class="mt" v-model="form.keyword" clearable @clear="_procurementList()"></el-input>
                    <el-date-picker
                            class="mt"
                            clearable
                            v-model="form.putInStorage"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="入库时间开始"
                            end-placeholder="入库时间结束">
                    </el-date-picker>
                    <el-select v-model="form.wid" clearable placeholder="选择仓库" style="width: 30%" @clear="_procurementList()">
                        <el-option
                                v-for="item in warehouseListAll"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.status" clearable placeholder="选择状态" style="width: 30%" class="mt" @clear="_procurementList()">
                        <el-option
                                v-for="item in statusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="text-align: right" class="mt">
                    <el-button type="primary" @click="search" plain>搜索</el-button>
                    <el-button type="primary" @click="exportExcel">导出记录</el-button>
                </div>
            </el-col>
        </el-row>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="仓库名称" prop="warehouse_name"></el-table-column>
            <el-table-column label="商品与库存">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: column">
                        <span v-for="item in scope.row.gifts">{{ item.name }} <i style="font-style: normal;padding-left: 5px;">(<em style="font-style: normal;color: #67c23a">+{{ item.total }}</em>)</i></span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="采购人" prop="create_username"></el-table-column>
            <el-table-column label="采购时间" prop="create_time"></el-table-column>
            <el-table-column label="收货人" prop="audit_username"></el-table-column>
            <el-table-column label="确认时间" prop="audit_time"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="makeSure(scope.$index, scope.row, 1)" v-if="scope.row.status === 0">确认收货</el-button>
                    <el-button size="mini" type="primary" @click="makeSure(scope.$index, scope.row, 2)" plain v-if="scope.row.status === 0">未收货</el-button>
                    <span style="color: #67c23a" v-if="scope.row.status === 1">已确认</span>
                    <span style="color: #f56c6c;" v-if="scope.row.status === 2">未收货</span>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total"></Pagination>
    </div>
</template>

<script>
    import { procurementList, procurementVerify, warehouseList } from '../../api/warehouseApi'
    import { exportProcurementList } from '../../api/publicApi'
    import Pagination from '../../components/pagination'
    export default {
        name: "purchase",
        data () {
            return {
              tableData: [],
              loading: true,
              total: 0,
              page: 1, // 页数
              form: {
                purchase: [],
                putInStorage: [],
                keyword: '',
                wid: '',
                status: ''
              },
              warehouseListAll: [],
              statusList: [
                {
                  id: 0,
                  name: '未确认'
                },
                {
                  id: 1,
                  name: '已确认'
                },
                {
                  id: 2,
                  name: '未收货'
                }
              ]
            }
        },
        created () {
          this._warehouseList()
          this._procurementList()
        },
        methods: {
          //仓库列表所有的
          async _warehouseList() {
            const res = await warehouseList({length: 10000,oneself: 1})
            console.log(res)
            this.warehouseListAll = res.data.list
          },
          search() {
            console.log(this.form)
            this._procurementList()
          },
          async _procurementList() {
            let start_time = ''
            let end_time = ''
            let audit_start_time = ''
            let audit_end_time = ''
            if (Array.isArray(this.form.purchase)) {
              start_time = this.form.purchase[0]
              end_time = this.form.purchase[1]
            }
            if (Array.isArray(this.form.putInStorage)) {
              audit_start_time = this.form.putInStorage[0]
              audit_end_time = this.form.putInStorage[1]
            }
            let data = {
              p: this.page,
              length: 10,
              start_time: start_time,
              end_time: end_time,
              audit_start_time: audit_start_time,
              audit_end_time: audit_end_time,
              keyword: this.form.keyword,
              wid: this.form.wid,
              status: this.form.status
            }
            const res = await procurementList(data)
            console.log(res)
            this.tableData = res.data.list
            this.total = res.data.total
            this.loading = false
          },
          // 分页的 当前点击的页数
          currentPage(newPage) {
            console.log(`当前页: ${newPage}`)
            this.page = newPage
            this.loading = true
            this._procurementList() // 获取礼品分类列表
          },
          makeSure(index, row, flag) {
            let msg = ''
            let data = {id: row.id}
            if (flag === 1) {
              data = {...data, status: 1}
              msg = '确认收货, 是否继续?'
            }else {
              data = {...data, status: 2}
              msg = '取消收货, 是否继续?'
            }
            this.$confirm(msg, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              await procurementVerify(data)
              this.$message.success('操作成功!')
              this._procurementList()
            }).catch(() => {
              this.$message.info('已取消')
            })
          },
          async exportExcel() {
            let param = new URLSearchParams()
            param.append("p", this.page)
            param.append("length", 10000)
            param.append("export", 1)
            const res = await exportProcurementList(param)
            console.log(res)
            const link = document.createElement('a')
            let blob = new Blob([res],{type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let num = new Date().getTime()
            console.log(num)
            link.setAttribute('download', `采购记录_${num}.xlsx`)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        },
        components: {
            Pagination
        }

    }
</script>

<style scoped lang="scss">
    .info {
        margin: 15px 0 20px 0;
        padding: 5px 20px;
        background-color: #E9F6FF;
        font-size: 12px;
        border-radius: 4px;
    }
    .mt {
        margin-top: 5px;
    }
</style>
